<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<!--复选框-->
		<!--checkbox常用于多选的情况，比如批量删除、添加等-->
		<div class="mui-input-row mui-checkbox">
			<label>checkbox示例</label>
			<input type="checkbox" value="Item1" name="checkbox1" checked />
		</div> 
		<!--.mui-left:使checkbox显示再左边，不使用默认在右侧显示-->
		<div class="mui-input-row mui-checkbox mui-left">
			<label>checkbox左侧显示示例</label>
			<input type="checkbox" value="Item2" name="checkbox1" checked />
		</div> 
		
		<!--单选框,若要禁用则添加disabled-->
		<!--radio用于单选的情况-->
		<div class="mui-input-row mui-radio">
			<label>radio1</label>
			<input type="radio" name="radio1" class="rds" />
		</div>
		<!--左侧显示添加.mui-left-->
		<div class="mui-input-row mui-radio mui-left rds">
			<label>radio2</label>
			<input type="radio" name="radio1" class="rds" />
		</div>
		
		
		<!--获取单选框值-->
		<div style="margin: 20px 0; border: 1px black solid;">
			<h2>获取单选框值</h2>
			<div class="mui-input-row mui-radio mui-left">
				<label>篮球</label>
				<input type="radio" name="radio1" class="rds" value="篮球" />
			</div>
			<div class="mui-input-row mui-radio mui-left rds">
				<label>羽毛球</label>
				<input type="radio" name="radio1" class="rds" value="羽毛球" />
			</div>
			<div class="mui-input-row mui-radio mui-left rds">
				<label>足球</label>
				<input type="radio" name="radio1" class="rds" value="足球" />
			</div>
			
			<div style="text-align: center;"><button onclick="getVal()">获取值</button></div>
		</div>
		
		<!--获取复选框值-->
		<div style="margin: 20px 0; border: 1px black solid;">
			<h2>获取复选框值</h2>
			
			<div class="mui-input-row mui-checkbox mui-left">
				<label>看书</label>
				<input type="checkbox" value="看书" name="checkbox1" class="cbr" />
			</div> 
			<div class="mui-input-row mui-checkbox mui-left">
				<label>画画</label>
				<input type="checkbox" value="画画" name="checkbox1" class="cbr" />
			</div> 
			<div class="mui-input-row mui-checkbox mui-left">
				<label>唱歌</label>
				<input type="checkbox" value="唱歌" name="checkbox1" class="cbr" />
			</div> 
			
			<div style="text-align: center;"><button onclick="getVals()">获取值</button></div>
		</div>
		
		<!--列表是单选-->
		<ul class="mui-table-view mui-table-view-radio">
			<li class="mui-table-view-cell">
				<a class="mui-navigate-right">Item 1</a>
			</li>
			<li class="mui-table-view-cell mui-selected">
				<a class="mui-navigate-right">Item 2</a>
			</li>
			<li class="mui-table-view-cell">
				<a class="mui-navigate-right">Item 3</a>
			</li>
		</ul>
		
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init();
			
			//列表式单选在切换选中项时会触发selected事件，在事件参数（e.detail.el）中可以获得当前选中的dom节点。
			var list = document.querySelector('.mui-table-view.mui-table-view-radio');
			list.addEventListener('selected',function(e){
			    console.log("当前选中的为："+e.detail.el.innerText);
			});
			
			//js获取单选按钮的值
			function getVal(){
				//判断获取到的值，若值为空则显示“请选择”
				var res = getRadioRes("rds");
				if(res == null){
					mui.toast('请选择');
					return ;
				}
				mui.toast(res);
			}
			//封装获取被选中框的值函数
			function getRadioRes(className){
				var rdsObj = document.getElementsByClassName(className);
				var checkVal = null;
				for(i = 0; i < rdsObj.length; i++){
					if(rdsObj[i].checked){
						checkVal = rdsObj[i].value;
					}
				}
				return checkVal;
			}
			
			
			//js获取复选框的值
			function getVals(){
				var res = getCheckBoxRes('cbr');
				if(res.length < 1){
			        mui.toast('请选择');
			        return;
			    }
			    mui.toast(res);
			}
			//封装获取选中复选框值的函数
			function getCheckBoxRes(className){
				var rdsObj = document.getElementsByClassName(className);
				var checkVal = new Array();
				for(var i = 0; i < rdsObj.length; i++){
					if(rdsObj[i].checked){
						checkVal.push(rdsObj[i].value);
					}
				}
				return checkVal;
			}
		</script>
	</body>

</html>